<template>
  <div class="component-addcontract">
    <div class="component-mainHeader">
      <div class="top">
        <div class="topleft">
          <p>
            <span class="iconfont" style="color:#1abc9a;margin-right:3px;">&#xe607;</span>添加合同-真实单项（有框架）
          </p>
        </div>
        <div class="topright">
          <el-button type="info" @click="$router.go(-1)">
            <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe606;</span>返回
          </el-button>
        </div>
      </div>
      <!-- 中间部分 -->
      <div class="component-main">
        <div class="component-main-left">
          <div class="box1">
            <span class="iconfont">&#xe67e;</span>
            <span>基本信息</span>
            <div class="arrow"></div>
          </div>
        </div>

        <!-- 表单部分 -->
        <div class="component-main-right">
          <div class="box">
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
              :inline="true"
            >
              <!--<el-form-item label="合同类型：" prop="region" label-width="150px">
                <el-select v-model="ruleForm.region" placeholder="全部" style="width:217px" clearable>
                  <el-option
                    v-for="(item, index) in list1"
                    :key="index"
                    :value="item.orgId"
                    :label="item.orgName"
                  ></el-option>
                </el-select>
              </el-form-item>-->

              <el-form-item label="所属框架合同：" prop="userTruename" label-width="148px">
                <el-input v-model="ruleForm.userTruename" style="width: 300px;" disabled></el-input>
              </el-form-item>
              <el-form-item label="所属框架合同编号：" prop="userOrg" label-width="150px">
                <el-input v-model="ruleForm.userOrg" style="width: 300px;" disabled></el-input>
              </el-form-item>

              <el-form-item label="单项合同编号：" prop="userMoney" label-width="150px">
                <el-input v-model="ruleForm.userMoney" style="width: 300px;" clearable></el-input>
              </el-form-item>

              <el-form-item label="内部合同编号：" prop="Nenum" label-width="150px">
                <el-input v-model="ruleForm.Nenum" style="width: 300px;" clearable></el-input>
              </el-form-item>

              <el-form-item label="项目编号/预算编码：" prop="code" label-width="152px">
                <el-input v-model="ruleForm.code" style="width: 298px;" clearable></el-input>
              </el-form-item>

             <!-- <el-form-item label="项目名称：" prop="projectName" label-width="150px">
                <el-input v-model="ruleForm.projectName" clearable></el-input>
              </el-form-item>-->

              <el-form-item label="合同名称：" prop="nename" label-width="150px">
                <el-input v-model="ruleForm.nename" style="width: 300px;" clearable></el-input>
              </el-form-item>

              <el-form-item label="合同金额除税(万元)：" prop="neMoney" label-width="160px" style="width:490px;margin-left: -10px;">
                <el-input-number style="width: 300px;" v-model="ruleForm.neMoney" placeholder="请输入合同金额(万元)" controls-position="right" :min="0" clearable></el-input-number>
                <!--<el-input type="number" v-model="ruleForm.neMoney" clearable style="width: 218px;"></el-input> 万元-->
              </el-form-item>

              <el-form-item label="合同金额含税(万元)：" prop="needMoney" label-width="160px" style="width:490px;margin-left: -10px;">
                <el-input-number style="width: 300px;" v-model="ruleForm.needMoney" placeholder="请输入合同金额(万元)" controls-position="right" :min="0" clearable></el-input-number>
                <!--<el-input type="number" v-model="ruleForm.needMoney" clearable  style="width: 218px;"></el-input> 万元-->
              </el-form-item>

              <el-form-item label="增值税税金(万元)：" label-width="150px">
                <div v-if="isNaN(ruleForm.neMoney) && isNaN(ruleForm.needMoney)"><el-input v-model="defaults" disabled style="width: 300px;"></el-input></div>
                <div v-else><el-input v-model="ruleForm.needMoney - ruleForm.neMoney" style="width: 300px;" disabled></el-input></div>
              </el-form-item>

              <el-form-item
                label="降点数："
                prop="count"
                label-width="150px"
              >
                <el-input v-model="ruleForm.count" disabled style="width: 300px;"></el-input>
              </el-form-item>

              <!-- 时间 -->
              <el-form-item prop="date1" label="签订时间：" label-width="150px" required>
                <el-date-picker
                  style="width: 300px;"
                  v-model="ruleForm.date1"
                  type="date"
                  placeholder="选择日期"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="timestamp"
                  default-time="00:00:00"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="开工时间：" prop="date3" label-width="150px" required>
                <el-date-picker
                  style="width: 300px;"
                  v-model="ruleForm.date3"
                  type="date"
                  placeholder="选择日期"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="timestamp"
                  default-time="00:00:00"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="完工时间：" prop="date2" label-width="150px" required>
                <el-date-picker
                  style="width: 300px;"
                  v-model="ruleForm.date2"
                  type="date"
                  placeholder="选择日期"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="timestamp"
                  default-time="00:00:00"
                ></el-date-picker>
              </el-form-item>

              <!-- 上传文件 -->
              <el-form-item label="合同附件：" label-width="150px">
                <el-upload
                  ref="upload"
                  class="upload-demo"
                  action="/api/web/proContract/ProContractFile"
                  :headers="myheader"
                  :file-list="fileList"
                  :auto-upload="true"
                  :data="FileObject"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  :before-upload="beforeAvatarUpload"
                  :on-exceed="handleExceed"
                  :limit="1"
                  :on-success="handChange"
                  :multiple="true"
                >
                  <el-button
                  size="small"
                  type="primary"
                  style=" width: 300px;height: 40px;"
                >选择上传文件</el-button>
                </el-upload>
              </el-form-item>
              <!--accept=".jpg, .jpeg, .png, .pdf, .dwg, .xls, .xlsx, .doc, .docx, .JPG, .JPEG, .PNG, .PDF, .DWG, .XLS, .XLSX, .DOC, .DOCX, .zip, .rar"-->
              <div style="font-size: 12px;color: #ccc;margin-top: -10px;margin-left: 120px;margin-bottom: 12px;">文件大小不能超过10M</div>
              <el-form-item
                style="margin-left:65px;"
                prop="type"
                label-width="150px"
              >
                <div class="check-btn" style="width: 700px;margin-left: -100px;">
                  <span style="margin-right: 10px;">合同价款与支付：</span>
                  <el-checkbox v-model="checkboxSelect[0]" @click="checkboxSelect[0] = !checkboxSelect[0];">预付款</el-checkbox>
                  <el-checkbox v-model="checkboxSelect[1]" @click="checkboxSelect[1] = !checkboxSelect[1]">进度款</el-checkbox>
                  <el-checkbox v-model="checkboxSelect[2]" @click="checkboxSelect[2] = !checkboxSelect[2]">初验款</el-checkbox>
                  <el-checkbox v-model="checkboxSelect[3]" @click="checkboxSelect[3] = !checkboxSelect[3]">终验款</el-checkbox>
                </div>
              </el-form-item>

              <el-form-item style="margin-left: 88px;" v-if="checkboxSelect[0]" label-width="150px">
                <span>预付款比例：</span>
                <!--<span class="one">订单合同确认之日起</span>-->
                <!--<input
                  type="text"
                  class="main-input"
                  style="text-align:center"
                  v-model="ruleForm.input1"
                >-->
                <el-input-number v-model="ruleForm.input1" style="width: 100px;" :controls="false" :min="1" :max="100" clearable></el-input-number>
                <span class="two">%</span>
                <input
                  v-if="isNaN(ruleForm.needMoney)||isNaN(ruleForm.input1)"
                  type="text"
                  class="main-input"
                  style="text-align:center"
                >
                <input
                  v-else
                  type="text"
                  class="main-input"
                  style="text-align:center"
                  disabled
                  v-model="parseFloat(ruleForm.needMoney*ruleForm.input1*0.01).toFixed(2)"
                >
                <!--<input
                  type="text"
                  class="main-input"
                  style="text-align:center"
                  v-model="ruleForm.input11"
                >-->
                <span class="two">万元</span>
              </el-form-item>
              <el-form-item style="margin-left: 88px;" v-if="checkboxSelect[1]" label-width="150px">
                <span>进度款比例：</span>
                <!--<input
                  type="text"
                  class="main-input"
                  style="text-align:center"
                  v-model="ruleForm.input2"
                >-->
                <el-input-number v-model="ruleForm.input2" style="width: 100px;" :controls="false" :min="1" :max="100" clearable></el-input-number>
                <span class="two">%</span>
                <input
                  v-if="isNaN(ruleForm.needMoney)||isNaN(ruleForm.input2)"
                  type="text"
                  class="main-input"
                  style="text-align:center"
                >
                <input
                  v-else
                  type="text"
                  class="main-input"
                  style="text-align:center"
                  disabled
                  v-model="parseFloat(ruleForm.needMoney*ruleForm.input2*0.01).toFixed(2)"
                >
               <!-- <input
                  type="text"
                  class="main-input"
                  style="text-align:center"
                  v-model="ruleForm.input22"
                >-->
                <span class="two">万元</span>
              </el-form-item>
              <el-form-item style="margin-left: 88px;" v-if="checkboxSelect[2]" label-width="150px">
                <span>初验款比例：</span>
                <el-input-number v-model="ruleForm.input3" style="width: 100px;" :controls="false" :min="1" :max="100" clearable></el-input-number>
               <!-- <input
                  type="text"
                  class="main-input"
                  style="text-align:center"
                  v-model="ruleForm.input3"
                >-->
                <span class="two">%</span>
                <input
                  v-if="isNaN(ruleForm.needMoney)||isNaN(ruleForm.input3)"
                  type="text"
                  class="main-input"
                  style="text-align:center"
                >
                <input
                  v-else
                  type="text"
                  class="main-input"
                  style="text-align:center"
                  disabled
                  v-model="parseFloat(ruleForm.needMoney*ruleForm.input3*0.01).toFixed(2)"
                >
                <!--<input
                  type="text"
                  class="main-input"
                  style="text-align:center"
                  v-model="ruleForm.input33"
                >-->
                <span class="two">万元</span>
              </el-form-item>
              <el-form-item style="margin-left: 88px;" v-if="checkboxSelect[3]" label-width="150px">
                <span>终验款提醒：</span>
                <el-input-number v-model="ruleForm.input4" style="width: 100px;" :controls="false" :min="1" :max="100" clearable></el-input-number>
                <!--<input
                  type="text"
                  class="main-input"
                  style="text-align:center"
                  v-model="ruleForm.input4"
                >-->
                <span class="two">%</span>
                <input
                  v-if="isNaN(ruleForm.needMoney)||isNaN(ruleForm.input4)"
                  type="text"
                  class="main-input"
                  style="text-align:center"
                >
                <input
                  v-else
                  type="text"
                  class="main-input"
                  style="text-align:center"
                  disabled
                  v-model="parseFloat(ruleForm.needMoney*ruleForm.input4*0.01).toFixed(2)"
                >
                <!--<input
                  type="text"
                  class="main-input"
                  style="text-align:center"
                  v-model="ruleForm.input44"
                >-->
                <span class="two">万元</span>
              </el-form-item>

              <el-form-item style="margin-left: 100px;">
                <el-button type="primary" @click="submitForm('ruleForm')" style="width:180px">提交</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "addTurecontract",
  data() {
    return {
      default:'',

      myheader: { token: localStorage.getItem("token") },
      // 合同类型列表
      list1: [
        {
          orgId: "2",
          orgName: "虚拟合同"
        },
        {
          orgId: "3",
          orgName: "框架内单项合同"
        }
      ],
      // 上传文件
      fileCode: {},
      fileList: [],
      //上传文件类型
      FileObject: {
        bizType: "contract",
        parentId:this.$route.params.conId
      },
      checkboxSelect:[false,false,false,false],
      // 多选框表单值赋值初始化
      input1: "",
      input2: "",
      input3: "",
      input4: "",
      flag: 0,
      // 提交表单
      ruleForm: {
        count: "",
        userName: "",
        userOrg: "",
        userMoney: "",
        userTruename: "",
        region: "",
        date1: "",
        date2: "",
        date3: "",
        Nenum: "",
        neMoney: "",
        type: [],
        code:'',
        projectName:'',
        needMoney:'',
        input1:'',
        input11:'',
        input2:'',
        input22:'',
        input3:'',
        input33:'',
        input4:'',
        input44:'',
      },
      // 表单验证
      rules: {
        date1: [{ required: true, message: "请选择签订日期", trigger: "blur" }],
        date3: [{ required: true, message: "请选择开工日期", trigger: "blur" }],
        date2: [{ required: true, message: "请选择完工日期", trigger: "blur" }],
        userTruename: [
          {
            required: true,
            message: "请输入所属框架合同",
            trigger: "blur"
          }
        ],
        userOrg: [
          {
            required: true,
            message: "请输入所属框架合同编号",
            trigger: "blur"
          },
          { min: 1, max: 30, message: "长度在 1 到 30 个字符", trigger: "blur" }
        ],
        userMoney: [
          {
            required: true,
            message: "请输入单项合同编号",
            trigger: "blur"
          },
          { min: 1, max: 30, message: "长度在 1 到 30 个字符", trigger: "blur" }
        ],
        count: [
          {
            required: true,
            message: "请输入降点数",
            trigger: "blur"
          },
          { min: 1, max: 30, message: "长度在 1 到 30 个字符", trigger: "blur" }
        ],
        Nenum: [
          {
            required: true,
            message: "请输入内部合同编号",
            trigger: "blur"
          },
          { min: 1, max: 30, message: "长度在 1 到 30 个字符", trigger: "blur" }
        ],
        neMoney: [
          {
            required: true,
            message: "请输入合同金额",
            trigger: "blur"
          }
        ],
        needMoney: [
          {
            required: true,
            message: "请输入合同金额",
            trigger: "blur"
          }
        ],
        region: [
          {
            required: true,
            message: "请选择合同类型",
            trigger: "change"
          }
        ],
        nename: [
          {
            required: true,
            message: "请输入合同名称",
            trigger: "blur"
          },
          {
            min: 1,
            max: 100,
            message: "长度在 1 到 100 个字符",
            trigger: "blur"
          }
        ],
        projectName: [
          {
            required: true,
            message: "请输入合同名称",
            trigger: "blur"
          },
          {
            min: 1,
            max: 100,
            message: "长度在 1 到 100 个字符",
            trigger: "blur"
          }
        ],
        code: [
          {
            required: true,
            message: "请输入编码",
            trigger: "blur"
          },
          {
            min: 1,
            max: 100,
            message: "长度在 1 到 100 个字符",
            trigger: "blur"
          }
        ],
      }
    };
  },
  created() {
    // 调用赋值带进来的框架合同
    this.getPamers();
  },
  methods: {
    // 上传文件
    // 上传成功
    handChange(res, file, fileList) {
      if (res.flag == "0") {
        this.$msg("请选择自定义文件类型上传！");
        this.fileList = [];
      } else if (res.flag == "1") {
        this.fileList = fileList;
        this.fileCode = fileList[0].response;
        console.log(fileList[0].response);
      }
    },
    // 文件移除
    handleRemove(file, fileList) {
      if(file.status == "success"){
        let params = {
          fileUrl: this.fileCode.fileUrl,
          parentId: this.$route.params.conId
        };
        let suCb = res => {
          this.fileList = [];
        };
        let req = {
          url: "/api/web/sysFile/deleteFile",
          methods: "post",
          data: params,
          success: suCb,
        };
        this.$https(req);
      }else{
        this.fileList = [];
      }
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
//      return this.$confirm(`确定移除 ${file.name}？`);
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 10MB!');
      }
      return isLt2M;
    },
    // 将编号带进来
    getPamers() {
      this.ruleForm.userOrg = this.$route.params.userOrg;
      this.ruleForm.userTruename = this.$route.params.userTruename;
      this.ruleForm.count = this.$route.params.point+"";
      // this.conParta = this.$route.params.conParta
    },
    // 提交表单下一步
    submitForm(formName) {
      // 请求前调用赋值
//      this.panduan();
      this.$refs[formName].validate(valid => {
        if (valid) {
          if(this.ruleForm.date3>=this.ruleForm.date1 && this.ruleForm.date3<=this.ruleForm.date2){
            if(this.fileList.length>0){
              let that = this;
              let suCb = res => {
                console.log(res);
                console.log(that.ruleForm.userOrg);
                this.$router.push({
                  name: "contractList"
                });
                that.$msg("提交成功！");
              };
              let erCb = res => {
              };
              let params = {
                proContract:{
                  conId: that.$route.params.conId,
                  conType: '3',//合同类型3-框架内单项合同
                  parentId: that.$route.params.conIds,// 所属框架合同编号  父级Id
                  conOuterno: that.ruleForm.userMoney,//合同外部编号
                  conInnerno: that.ruleForm.Nenum,//合同内部编号
                  proNo:that.ruleForm.code,//项目编码
                  conName: that.ruleForm.nename,//合同名称
                  conPartya: that.$route.params.partya,// 甲方
                  conPartyb: that.$route.params.partyb,// 乙方
                  conMoney: that.ruleForm.needMoney,//合同金额（含税）
                  taxExcludingMoney:that.ruleForm.neMoney,//合同金额（除税）
                  conDroppoint: that.$route.params.point,//降点数
                  signDate: that.ruleForm.date1 + "",//签订时间
                  startDate: that.ruleForm.date3 + "",//开工时间
                  finishDate: that.ruleForm.date2 + "",//完工时间
                  prepayFlag: that.checkboxSelect[0]==true?'1':'0',//是否预付款提醒（0-不开启提醒，1-有提醒）
                  prepay_rate:that.ruleForm.input1,//预付款付款比例
                  prepay_money:that.ruleForm.needMoney*that.ruleForm.input1*0.01,//预付款付款金额
                  process_flag:that.checkboxSelect[1]==true?'1':'0',//是否进度款提醒（0-不开启提醒，1-有提醒）
                  process_rate:that.ruleForm.input2,//进度款付款比例
                  proces_money:that.ruleForm.needMoney*that.ruleForm.input2*0.01,//进度款付款金额
                  pre_accept_flag:that.checkboxSelect[2]==true?'1':'0',//是否初验款提醒（0-不开启提醒，1-有提醒）
                  pre_accept_rate:that.ruleForm.input3,//初验款付款比例
                  pre_accept_money:that.ruleForm.needMoney*that.ruleForm.input3*0.01,//初验款付款金额
                  final_accept_flag:that.checkboxSelect[3]==true?'1':'0',//是否终验款提醒（0-不开启提醒，1-有提醒）
                  final_accept_rate:that.ruleForm.input4,//终验款付款比例
                  final_accept_money:that.ruleForm.needMoney*that.ruleForm.input4*0.01,//终验款付款金额
                }
              };
              let req = {
                url: "/api/web/proContract/addContract",
                methods: "post",
                data: params,
                success: suCb,
                error: erCb
              };
              that.$https(req);
            }else{
              this.$erMsg('请先上传文件')
            }
          }else{
            this.$erMsg('开工时间应大于签订时间且小于完工时间')
          }
        }else{
          this.$erMsg("请按红色字的提示进行修改完善")
          return false;
        }
      });
    },
    clickMe(index) {
      this.flag = index;
      localStorage.setItem("flags", index);
    }
  }
};
</script>

<style scoped>
.component-main {
  width: 1102px;
  /* height: 1400px; */
  margin: 0 auto;
  margin-top: 49px;
  background-color: #fff;
  border: 1px solid #e4e4e4;
  border-top: none;
}

.component-main-left {
  width: 180px;
  height: 1561px;

  border: 1px solid #e4e4e4;
  padding-top: 50px;
  float: left;
  border-top: none;
}

.box1 {
  position: relative;
  width: 175px;
  height: 50px;
  text-align: left;
  line-height: 50px;
  background-color: #9ea7b4;
  color: #fff;
  padding-left: 5px;
}

.box1 .arrow {
  position: absolute;
  width: 0;
  height: 0;
  top: -40px;
  left: 180px;
  border-width: 25px 0 25px 25px;
  border-style: solid;
  border-color: transparent transparent transparent #9ea7b4;
  /*透明 透明 透明 灰*/
  margin: 40px auto;
}

/* 表单部分 */

.component-main-right {
  height: 1460px;
  float: right;
  width: 918px;
  margin: 0 auto;
  border-top: none;
  padding-top: 150px;
  border-bottom: 1px solid #e4e4e4;

  border-right: 1px solid #e4e4e4;
}

.box {
  width: 500px;
  margin: 0 auto;
}

.box .el-button--primary {
  color: #fff;
  background-color: #1abc9c;
  border-color: #1abc9c;
}

.box .el-form-item {
  width: 450px;
}

.el-form-item .el-form-item__label {
  width: 110px;
}

.el-form-item__content {
  margin-left: -103px;
}

.one {
  display: inline-block;
  width: 164px;
  height: 40px;
  background-color: #f2f2f2;
  border: 1px solid #e4e4e4;
}

.main-input {
  width: 90px;
  height: 40px;
  border: 1px solid #e4e4e4;
  margin-left: -4px;
  /*border-left: none;*/
}

.two {
  display: inline-block;
  width: 50px;
  height: 40px;
  background-color: #f2f2f2;
  border: 1px solid #e4e4e4;
  border-left: none;
  margin-left: -4px;
}
</style>
